<template>
	<view class="page">
		<!-- <up-navbar :title="`练单词·${sourceType == 0?'一阶':'二阶'}`" @rightClick="{}" :autoBack="true" bgColor = "#f1f1f1" placeholder></up-navbar> -->
		<view class="content">
			<view class="padding-30 box-sizing" style="width: 100%;  ">
				<up-input clearable @focus = "focus"  @clear = "clear" @confirm = "search" v-model = "searchVal" :adjustPosition = "false" confirmType = "search" placeholder="请输入搜索关键字">
					<template #suffix>
						<up-icon @click="search" name="search" size="18"></up-icon>
					</template>
				</up-input>
			</view>  
			<view class="width-full flex column">
				<view class="width-full flex column marginBottom-20" v-for = "(t,i) in list" :key="i" style="background-color: #f7f7f7;">
					<view class="fontSize-28 flex space-between padding-20 box-sizing" style="border-bottom: 1rpx solid #ededed;">
						<view class="color-696969" v-if="sourceType==0">
							{{t.total_page}}-{{t.total_big_sort}}-{{t.total_small_sort}}区单词故事
						</view>
						<view class="color-696969 flex" v-if="sourceType==1">
							
							<view class="">
								<!-- <view class="">
									{{t.create_time}}
								</view> -->
								<view class="">
									{{t.create_time}}
								</view>
							</view>
							<view class="marginLeft-30 tag" :class="t.status!=1?'y':'l'">
								{{t.status!=1?'待完成':'已完成'}}
							</view>
						</view>
						<view @click.stop="toDetails(t,i)" class="color-409EFF">
							{{sourceType==1&&t.status!=1?'继续训练':'查看'}}
						</view>
					</view>
					<view class="fontSize-28 color-333 padding-20 box-sizing">
						{{sourceType==0?t.content:t.content}}
					</view>
					<view v-if="sourceType==0" class="fontSize-24 width-full flex flex-end color-bebebe padding-20 box-sizing">
						{{t.create_time}}
					</view>
				</view>
			</view>
		</view>
		<view @click.stop="toPage" class="toPage">
			<view class="">
				去训练
			</view>
		</view>
	</view>
</template>

<script setup>
	import {reactive, ref,nextTick,inject } from 'vue'
	import { onLoad,onUnload,onShow } from '@dcloudio/uni-app'
	const practiceIndexApi = inject('practiceIndex');
	const practiceWordslistApi = inject('practiceWordslist');
	const chaifenlistApi = inject('chaifenlist');
	const judgepracticeApi = inject('judgepractice');
	const practiceWordsviewApi = inject('practiceWordsview');
	// const practiceIndexApi = inject('practiceIndex');
	// data
	const tabs = ref([
		{ name: '一阶训练' },
		{ name: '二阶训练' },
	]);
	const editShow = ref(false);
	const sourceType = ref(0);
	const list = ref([])
	const searchVal = ref('')
	
	// created
	onLoad((op)=>{
		sourceType.value = op.type?op.type:0
		getIndex();
	})
	
	
	
	
	
	// methods
	const getIndex = ()=>{
		if(sourceType.value==1){
			practiceIndexApi().then(res=>{
				console.log(res,'11111111asasdasd')
				list.value = res
			})
		}else{
			practiceWordslistApi().then(res=>{
				console.log(res,'asasdasd')
				list.value = res
			})
		}
	}
	const toPage = ()=>{
		console.log('zzzzzzzz')
		
		if(sourceType.value == 0){
			uni.navigateTo({
				url:'/pages/index/memoryWordGuide?isJy=1'
			})
			return 
			// 下面暂时不走
			
			 judgepracticeApi().then(res=>{
				console.log(res);
				if(res){
					if(res.status == 0){
						practiceWordsviewApi({
							page:res["page"],
							big_sort:res["big_sort"],
							small_sort:res["small_sort"],
						}).then(es=>{
							console.log(es);
							let data = {}
							data['page'] = res["page"]
							data['subscript'] = res['big_sort']+'_'+res['small_sort'];
							data['big_sort'] = res['big_sort'];
							data['small_sort'] = res['small_sort'];
							data['wordList'] = es['word_list'];
							uni.navigateTo({
								url:'/pages/index/practiceWord?data='+ JSON.stringify(data)
							})
							
						})
						
					}else{
						uni.showToast({
							title:res.ts,
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/index/memoryWordGuide?isJy=1'
							})
						},1000)
					}
				}
				
			 })
					
		}else{
			uni.navigateTo({
				url:'/pages/index/practiceWoeds/wordList'
			})
		}
	}
	const focus = ()=>{
		// clearTime();
	}
	const search = ()=>{
		if(!searchVal.value) return
		// searchApi({word:searchVal.value}).then(res=>{
		// 	console.log(res,'21213123')
		// 	searchList.value = res.wordInfo
		// 	starShow.value = res.wordInfo&&res.wordInfo.is_add_unword&&res.wordInfo.is_add_unword == 1?true:false
		// })
		
		practiceWordslistApi({keyword:searchVal.value}).then(res=>{
			console.log(res,'搜索')
			list.value = res
		})
	}
	const toDetails = (t,i)=>{
		 if(sourceType.value == 0){
			practiceWordsviewApi({
				practice_id:t.id,
				// page:t["total_page"],
				// big_sort:t["total_big_sort"],
				// small_sort:t["total_small_sort"],
			}).then(res=>{
				let data = {}
				data['page'] = t["total_page"]
				data['subscript'] = t['total_big_sort']+'_'+t['total_small_sort'];
				data['big_sort'] = t['total_big_sort'];
				data['small_sort'] = t['total_small_sort'];
				data['wordList'] = res['word_list'];
				data['content'] = res['content'];
				uni.navigateTo({
					url:'/pages/index/practiceWord?data='+ JSON.stringify(data)
				})
			
			})
			
		 }else{ 
			 if(t.status==2){
				chaifenlistApi({
					practic_id:t.practic_id
				}).then(res=>{
					 console.log(res,'ssssssssss')
					 uni.navigateTo({
						url:'/pages/index/practiceWoeds/stepHome?data='+JSON.stringify(res)
					 })
				})
			 }else if(t.status == 0){
				uni.navigateTo({
					url:'/pages/index/practiceWoeds/wordList'
				})
			}else{
				 uni.navigateTo({
					url:'/pages/index/practiceWoeds/total?practic_id='+t.practic_id+'&content='+t.content
				 })
				
				
			 }
			
		 }
		
	}
	
	
</script>

<style lang="scss">
	.toPage{
		position: fixed;
		right: 30rpx;
		bottom: 200rpx;
		border-radius: 50%;
		border: 1rpx solid #ededed;
		background-color: #d0ebff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		width: 120rpx;
		height: 120rpx;
		z-index: 99999;
		box-shadow: 0rpx 0rpx 10rpx #d0ebff;
	}
	.tag{
		font-size: 24rpx;
		padding: 0rpx 10rpx;
		border-radius: 8rpx;
		color: #fff;
	}
	.y{
		background-color: #f18305;
	}
	.l{
		background-color: #06c22b;
	}
</style>
